<template>
  <div>
    <!-- <div class="content-container" @click="handleSearch">
      <span class="content">{{ value }}</span>
      <p-button>复制线索</p-button>
    </div> -->
    <p-modal
      v-model="visible"
      :title="title"
      :width="1003"
      :mask-closable="false"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <div>
        <p-form-model
          :model="form"
          :rules="rules"
          layout="inline"
          :label-col="{ span: 7 }"
        >
          <p-form-model-item label="商机编号">
            <p-input v-model="form.opportunityNo" placeholder="请输入" />
          </p-form-model-item>
          <p-form-model-item label="商机名称">
            <p-input v-model="form.opportunityName" placeholder="请输入" />
          </p-form-model-item>
          <p-form-model-item label="商机阶段">
            <SelectDefault
              v-model="form.stage"
              code="business_stage_process_node"
            />
          </p-form-model-item>
          <p-button type="primary" @click="getList(1)">搜索</p-button>
          <p-form-model-item label="销售组织">
            <SelectOrg v-model="form.salesOrgCode" />
          </p-form-model-item>
          <p-form-model-item label="应用别">
            <SelectDefault v-model="form.appCategory" code="application" />
          </p-form-model-item>
          <p-form-model-item label="创建人">
            <p-input v-model="form.createdName" placeholder="请输入" />
          </p-form-model-item>
          <p-button style="margin-left: auto" @click="handleReset">
            重置
          </p-button>
        </p-form-model>
        <p-table
          class="table-list-container"
          row-key="id"
          :columns="columns"
          :scroll="{ x: 1400, y: 300 }"
          bordered
          :data-source="dataSource"
          :pagination="paginationMixin"
          :row-selection="rowSelectionMixin"
          v-bind="$attrs"
          @change="handleTableChange"
          v-on="$listeners"
        >
          <a
            slot="opportunityNo"
            slot-scope="text, record"
            @click="$emit('number-click', record)"
          >
            {{ text }}
          </a>
        </p-table>
      </div>
    </p-modal>
  </div>
</template>

<script>
import { postBusinessList } from '@/api/business.js';
import mixinTable from '@/mixins/mixin-table.js';
const defaultForm = {
  opportunityNo: '',
  opportunityName: '',
  stage: '',
  salesOrgCode: '',
  appCategory: '',
  createdName: '',
};
export default {
  mixins: [mixinTable],
  props: {
    title: {
      type: String,
      default: '选择商机',
    },
    value: {
      type: [String, Number],
      default: undefined,
    },
    index: {
      type: Number,
      default: 0,
    },
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      asc: true,
      form: {
        ...defaultForm,
      },
    };
  },
  computed: {
    stateOptions() {
      return this.$store.state.dictionary.dict['business_status'] || {};
    },
    appOptions() {
      return this.$store.state.dictionary.dict['application'] || {};
    },
    orgOptions() {
      return this.$store.getters.getOrg({
        code: 'ltcsmsizebu',
      });
    },
    stageOptions() {
      return (
        this.$store.state.dictionary.dict['business_stage_process_node'] || {}
      );
    },
    columns() {
      const columns = [
        {
          align: 'center',
          title: '序号',
          width: 60,
          customRender(t, r, index) {
            return parseInt(index) + 1;
          },
        },
        {
          align: 'center',
          title: '商机编号',
          dataIndex: 'opportunityNo',
          width: 150,
          sorter: true,
          scopedSlots: { customRender: 'opportunityNo' },
        },
        {
          align: 'center',
          title: '商机名称',
          width: 160,
          ellipsis: true,
          dataIndex: 'opportunityName',
        },
        {
          align: 'center',
          title: '商机状态',
          dataIndex: 'state',
          width: 160,
          ellipsis: true,
          customRender: (text) => this.stateOptions[text],
        },
        {
          align: 'center',
          title: '商机阶段',
          dataIndex: 'stage',
          width: 160,
          ellipsis: true,
          customRender: (text) => this.stageOptions[text],
        },
        {
          align: 'center',
          title: '销售组织',
          dataIndex: 'salesOrgCode',
          width: 100,
          ellipsis: true,
          customRender: (text) => this.orgOptions[text],
        },
        {
          align: 'center',
          title: '应用别',
          dataIndex: 'appCategory',
          width: 100,
          ellipsis: true,
          customRender: (text) => this.appOptions[text],
        },
        {
          align: 'center',
          title: '创建人',
          width: 160,
          ellipsis: true,
          dataIndex: 'createUserName',
        },
        {
          align: 'center',
          title: '创建时间',
          width: 160,
          ellipsis: true,
          dataIndex: 'createTime',
        },
      ];
      return columns;
    },
  },
  created() {
    this.rowSelectionMixin.type = 'radio';
    this.getList();
  },
  methods: {
    getSearchForm() {
      const page = {
        current: this.paginationMixin.current,
        pageSize: this.paginationMixin.pageSize,
        asc: this.asc,
        column: this.columnKey,
      };
      return {
        ...this.form,
        ...page,
        bizType: '4',
        bizModule: 'biz',
        status: '1',
        createUserName: this.$store.state.user.name,
      };
    },
    // 搜索商机列表
    async getList(val) {
      if (val) {
        this.paginationMixin.current = 1;
      }
      const form = this.getSearchForm();
      this.loading = true;
      const result = await postBusinessList(form).finally(
        () => (this.loading = false)
      );
      this.dataSource = result.data.data?.records;
      this.paginationMixin.total = result.data.data?.total;
    },
    // 重置
    handleReset() {
      this.form = { ...defaultForm };
      this.paginationMixin.current = 1;
      this.getList();
    },
    handleOrgChange(val) {
      this.form.salesOrgCode = val;
      this.form.salesGroupCode = '';
      this.form.pmGroupCode = '';
    },
    handleSearch() {
      this.visible = true;
    },
    // 选择商机
    handleOk() {
      const keys = this.rowSelectionMixin.selectedRowKeys;
      if (!keys.length) {
        this.$message.error('请选择商机！');
        return;
      }
      const current = this.dataSource.find((item) => item.id === keys[0]);
      this.$emit('change', current);
      this.handleCancel();
    },
    handleCancel() {
      this.rowSelectionMixin.selectedRowKeys = [];
      this.$emit('update:visible', false);
      this.$emit('cancel', false);
    },
    handleTableChange(page, filters, sorter, { currentDataSource }) {
      this.asc = sorter.order === 'ascend' ? true : false;
      this.columnKey = sorter.columnKey;
      this.paginationMixin = page;
      this.getList();
    },
  },
};
</script>

<style lang="less" scoped>
.content-container {
  width: 100%;
  display: flex;
  align-items: center;
  .content {
    display: flex;
    justify-content: center;
    flex: 1;
  }
}
.table-list-container {
  margin-top: 20px;
}

.poros-form {
  box-sizing: border-box;
  background-color: #f7f7f8;
  padding: 10px;
  padding-bottom: 0px;
  width: 100%;
}
.poros-form-item {
  width: 25%;
  margin-bottom: 10px;
}
/deep/ .poros-form-item-control-wrapper {
  width: calc(100% - 70px);
}
.btn-search {
  margin-right: 16px;
}
</style>
